<template>
  <div class="main" style="margin-top: 10%">
    <a-form
      :form="form"
      class="user-layout-login"
      ref="formLogin"
      id="formLogin"
    >
      <a-tabs
        :activeKey="customActiveKey"
        :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
        @change="handleTabClick"
      >
        <a-tab-pane
          key="tab1"
          :tab="
            loginMode == 'manager'
              ? '管理端账号密码登录'
              : loginMode == 'client'
              ? '客户端账号密码登录'
              : '账号密码登录'
          "
        >
          <a-form-item>
            <a-input
              size="large"
              v-decorator="[
                'username',
                validatorRules.username,
                { validator: this.handleUsernameOrEmail },
              ]"
              type="text"
              placeholder="请输入帐户名"
            >
              <a-icon
                slot="prefix"
                type="user"
                :style="{ color: 'rgba(0,0,0,.25)' }"
              />
            </a-input>
          </a-form-item>

          <a-form-item>
            <a-input
              v-decorator="['password', validatorRules.password]"
              size="large"
              type="password"
              autocomplete="false"
              placeholder="密码"
            >
              <a-icon
                slot="prefix"
                type="lock"
                :style="{ color: 'rgba(0,0,0,.25)' }"
              />
            </a-input>
          </a-form-item>

          <a-form-item v-if="!onlyClient && !onlyManager">
            <a-radio-group v-model="loginMode" size="small">
              <a-radio v-if="!onlyClient" value="manager">管理端</a-radio>
              <a-radio v-if="!onlyManager" value="client">客户端</a-radio>
            </a-radio-group>
          </a-form-item>

          <!--					<a-row :gutter="0">-->
          <!--						<a-col :span="16">-->
          <!--							<a-form-item>-->
          <!--								<a-input v-decorator="['inputCode',validatorRules.inputCode]" size="large" type="text" @change="inputCodeChange"-->
          <!--								placeholder="请输入验证码">-->
          <!--									<a-icon slot="prefix" type="smile" :style="{ color: 'rgba(0,0,0,.25)' }" />-->
          <!--								</a-input>-->
          <!--							</a-form-item>-->
          <!--						</a-col>-->
          <!--						<a-col :span="8" style="text-align: right">-->
          <!--							<img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage" @click="handleChangeCheckCode" />-->
          <!--							<img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode" />-->
          <!--						</a-col>-->
          <!--					</a-row>-->
        </a-tab-pane>
      </a-tabs>
      <!-- <a-form-item> -->
      <!-- <a-checkbox v-decorator="['rememberMe', {initialValue: true, valuePropName: 'checked'}]" >自动登录</a-checkbox> -->
      <!-- <router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">
          忘记密码
        </router-link>
       <router-link :to="{ name: 'register'}" class="forge-password" style="float: right;margin-right: 10px" >
          注册账户
        </router-link> -->
      <!-- </a-form-item> -->

      <a-form-item style="margin-top: 24px">
        <a-button
          size="large"
          type="primary"
          htmlType="submit"
          class="login-button"
          :loading="loginBtn"
          @click.stop.prevent="handleSubmit"
          :disabled="loginBtn"
          >确定
        </a-button>
      </a-form-item>
    </a-form>
    <two-step-captcha
      v-if="requiredTwoStepCaptcha"
      :visible="stepCaptchaVisible"
      @success="stepCaptchaSuccess"
      @cancel="stepCaptchaCancel"
    ></two-step-captcha>
    <login-select-modal
      ref="loginSelect"
      @success="loginSelectOk"
    ></login-select-modal>
  </div>
</template>

<script>
import TwoStepCaptcha from "@/components/tools/TwoStepCaptcha";
import { mapActions } from "vuex";
import { timeFix } from "@/utils/util";
import Vue from "vue";
import { ACCESS_TOKEN, ENCRYPTED_STRING } from "@/store/mutation-types";
import { getAction } from "@/api/manage";
import { getEncryptedString } from "@/utils/encryption/aesEncrypt";
import LoginSelectModal from "./LoginSelectModal.vue";
import eventBus from "@/components/eventBus.js";
export default {
  components: {
    TwoStepCaptcha,
    LoginSelectModal,
  },
  data() {
    return {
      loginMode: "manager",
      onlyManager: false,
      onlyClient: false,
      customActiveKey: "tab1",
      loginBtn: false,
      // login type: 0 email, 1 username, 2 telephone
      loginType: 0,
      requiredTwoStepCaptcha: false,
      stepCaptchaVisible: false,
      form: this.$form.createForm(this),
      encryptedString: {
        key: "",
        iv: "",
      },
      validatorRules: {
        username: {
          rules: [
            {
              required: true,
              message: "请输入用户名!",
            },
            {
              validator: this.handleUsernameOrEmail,
            },
          ],
        },
        password: {
          rules: [
            {
              required: true,
              message: "请输入密码!",
              validator: "click",
            },
          ],
        },
        inputCode: {
          rules: [
            {
              required: true,
              message: "请输入验证码!",
            },
          ],
        },
      },
      verifiedCode: "",
      inputCodeContent: "",
      inputCodeNull: true,
      currentUsername: "",
      currdatetime: "",
      randCodeImage: "",
      requestCodeSuccess: false,
    };
  },
  created() {
    console.log("created", this.$route.query.mode);
    this.currdatetime = new Date().getTime();
    Vue.ls.remove(ACCESS_TOKEN);
    this.getRouterData();
    // this.handleChangeCheckCode();
    // update-begin- --- author:scott ------ date:20190805 ---- for:密码加密逻辑暂时注释掉，有点问题
    //this.getEncrypte();
    // update-end- --- author:scott ------ date:20190805 ---- for:密码加密逻辑暂时注释掉，有点问题
    this.onlyManager = false;
    this.onlyClient = false;
    let mode = this.$route.query.mode;
    if (mode == "manager" || mode == "client") {
      this.loginMode = mode;
      if (mode == "manager") {
        this.onlyManager = true;
      } else if (mode == "client") {
        this.onlyClient = true;
      }
    }
  },
  methods: {
    ...mapActions(["Login", "Logout"]),
    // handler
    handleUsernameOrEmail(rule, value, callback) {
      const regex =
        /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
      if (regex.test(value)) {
        this.loginType = 0;
      } else {
        this.loginType = 1;
      }
      callback();
    },
    handleTabClick(key) {
      this.customActiveKey = key;
      // this.form.resetFields()
    },
    handleSubmit() {
      let that = this;
      let loginParams = {};
      that.loginBtn = true;

      console.log(this.loginMode);

      // 使用账户密码登录
      if (that.customActiveKey === "tab1") {
        that.form.validateFields(
          ["username", "password"],
          {
            force: true,
          },
          (err, values) => {
            if (!err) {
              console.log(values);
              loginParams.loginName = values.username;
              // update-begin- --- author:scott ------ date:20190805 ---- for:密码加密逻辑暂时注释掉，有点问题
              //loginParams.password = md5(values.password)
              //loginParams.password = encryption(values.password,that.encryptedString.key,that.encryptedString.iv)
              loginParams.password = values.password;
              // loginParams.remember_me = values.rememberMe
              // update-begin- --- author:scott ------ date:20190805 ---- for:密码加密逻辑暂时注释掉，有点问题
              loginParams.captcha = that.inputCodeContent;
              loginParams.captchaKey = that.currdatetime;
              console.log("登录参数", loginParams);
              that
                .Login(loginParams)
                .then((res) => {
                  that.$refs.loginSelect.show(res.data);
                  that.loginBtn = false;
                })
                .catch((err) => {
                  that.requestFailed(err);
                });
            } else {
              that.loginBtn = false;
            }
          }
        );
      }
    },
    stepCaptchaSuccess() {
      this.loginSuccess();
    },
    stepCaptchaCancel() {
      this.Logout().then(() => {
        this.loginBtn = false;
        this.stepCaptchaVisible = false;
      });
    },
    handleChangeCheckCode() {
      this.currdatetime = new Date().getTime();
      getAction(`/sys/login/captcha/${this.currdatetime}`)
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.randCodeImage = "data:image/jpg;base64," + res.data;
            console.log(this.randCodeImage);
            this.requestCodeSuccess = true;
          } else {
            this.$message.error("获取验证码失败");
            this.requestCodeSuccess = false;
          }
        })
        .catch(() => {
          this.requestCodeSuccess = false;
        });
    },
    loginSuccess() {
      // update-begin- author:sunjianlei --- date:20190812 --- for: 登录成功后不解除禁用按钮，防止多次点击
      // this.loginBtn = false
      // update-end- author:sunjianlei --- date:20190812 --- for: 登录成功后不解除禁用按钮，防止多次点击
      if (this.loginMode == "manager") {
        this.$router
          .push({
            path: "/dashboard/analysis",
          })
          .catch(() => {
            console.log("登录跳转首页出错,这个错误从哪里来的");
          });
      } else if (this.loginMode == "client") {
        this.$router
          .push({
            path: "/client/home",
          })
          .catch(() => {
            console.log("登录客户端出错,这个错误从哪里来的");
          });
      }
      this.$notification.success({
        message: "欢迎",
        description: `${timeFix()}，欢迎回来`,
      });
      //   this.$message.success(`${timeFix()}，欢迎回来`);
    },
    cmsFailed(err) {
      this.$notification["error"]({
        message: "登录失败",
        description: err,
        duration: 4,
      });
    },
    requestFailed(err) {
      console.log(err);
      this.$notification["error"]({
        message: "登录失败",
        description:
          ((err.response || {}).data || {}).message ||
          err.msg ||
          "请求出现错误，请稍后再试",
        duration: 4,
      });
      this.loginBtn = false;
    },
    // validateInputCode(rule,value,callback){
    // 	if(!value || this.verifiedCode==this.inputCodeContent){
    // 		callback();
    // 	}else{
    // 		callback("您输入的验证码不正确!");
    // 	}
    // },
    generateCode(value) {
      this.verifiedCode = value.toLowerCase();
    },
    inputCodeChange(e) {
      this.inputCodeContent = e.target.value;
    },
    loginSelectOk() {
      this.loginSuccess();
    },
    getRouterData() {
      this.$nextTick(() => {
        if (this.$route.params.username) {
          this.form.setFieldsValue({
            username: this.$route.params.username,
          });
        }
      });
    },
    //获取密码加密规则
    getEncrypte() {
      var encryptedString = Vue.ls.get(ENCRYPTED_STRING);
      if (encryptedString == null) {
        getEncryptedString().then((data) => {
          this.encryptedString = data;
        });
      } else {
        this.encryptedString = encryptedString;
      }
    },
  },
  mounted() {
    eventBus.$on("permissionsErr", (err) => {
      console.log("登录失败:" + err);
      this.$notification["error"]({
        message: "获取权限组失败",
        description: err,
        duration: 4,
      });
    });
  },
};
</script>

<style lang="less" scoped>
.user-layout-login {
  label {
    font-size: 14px;
  }

  .getCaptcha {
    display: block;
    width: 100%;
    height: 40px;
  }

  .forge-password {
    font-size: 14px;
  }

  button.login-button {
    padding: 0 15px;
    font-size: 16px;
    height: 40px;
    width: 100%;
  }
}
</style>
<style>
.valid-error .ant-select-selection__placeholder {
  color: #f5222d;
}
</style>
